<script setup lang="ts">
import { ref, getCurrentInstance } from "vue";
import * as echarts from "echarts";
import { useRouterStoreHook } from "@/store/modules/router";
import { energyReportHistory } from "@/api/modules/energy";

const routerStore = useRouterStoreHook();
const { proxy }: any = getCurrentInstance();
const queryTimeParams = ref({});
// 默认查询前1h数据
const dateRange = ref([]);
const props = defineProps({
  queryParams: {
    type: Object,
    default: () => ({})
  },
  loading: {
    type: Boolean,
    default: false
  },
  tableData: {
    type: Array,
    default: () => []
  },
  activeName: {
    type: String,
    default: ""
  }
});
const dialogVisible = ref(false);
const currentRow: any = ref({});
/** 详情 */
function handleDetail(row: any) {
  currentRow.value = row;
  // 设置时间范围
  dateRange.value = [
    row.meterDate + " " + row.meterTime + ":00",
    row.meterDate + " " + row.meterTime + ":59"
  ];
  queryReportHistory();
  dialogVisible.value = true;
}
// 查询历史曲线
const queryReportHistory = async () => {
  const param = {
    energyType: props.activeName,
    className: routerStore.subject === "ALL" ? "" : routerStore.subject,
    meterNo: currentRow.value.meterNo
  };
  const data: any = await energyReportHistory(
    proxy.addDateRange(param, dateRange.value)
  );
  console.log("data", data);
  let xdata = data.map((item: any) => {
    return item.time;
  });
  let ydata = data.map((item: any) => {
    return item.value;
  });
  historyEchart(xdata, ydata);
};
const historyEchart = (xdata, ydata) => {
  type EChartsOption = echarts.EChartsOption;
  let chartDom = document.getElementById("meterTecord")!;
  let myChart = echarts.init(chartDom);
  let option: EChartsOption;

  option = {
    color: ["#3B82F6", "#FFAD1F "],
    tooltip: {
      trigger: "axis",
      confine: true,
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999"
        }
      }
    },
    grid: {
      left: "0px",
      top: "10px",
      right: "10px",
      bottom: "10px",
      containLabel: true
    },
    xAxis: [
      {
        type: "category",
        data: xdata
      }
    ],
    yAxis: [
      {
        type: "value",
        name: "kw",
        min: 0
      }
    ],
    series: [
      {
        name: "消耗数据",
        type: "line",
        // tooltip: {
        //   valueFormatter: function (value) {
        //     return value + " ml";
        //   }
        // },
        smooth: true,
        showSymbol: false,
        data: ydata,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#3B82F6" },
            { offset: 1, color: "white" }
          ])
        }
      }
    ]
  };
  option && myChart.setOption(option);
  // window.addEventLister('resize', function () {
  //     myChart.resize()
  // })
};
/** 搜索按钮操作 */
function handleQuery() {
  proxy.$refs["queryTimeRef"].validate(valid => {
    if (!valid) return;
    queryReportHistory();
  });
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryTimeRef");
  dateRange.value = [
    currentRow.value.meterDate + " " + currentRow.value.meterTime + ":00",
    currentRow.value.meterDate + " " + currentRow.value.meterTime + ":59"
  ];
  handleQuery();
}
</script>
<template>
  <div>
    <px-table ref="waterRef" v-loading="props.loading" :data="props.tableData">
      <px-table-column type="index" width="50" align="center" />
      <px-table-column
        label="系统"
        align="center"
        prop="systemName"
        :show-overflow-tooltip="true"
      />
      <px-table-column
        label="抄表项目"
        align="center"
        prop="meterItem"
        :show-overflow-tooltip="true"
      />
      <px-table-column
        label="抄表类型"
        align="center"
        prop="meterType"
        :show-overflow-tooltip="true"
      />
      <px-table-column
        label="仪表"
        align="center"
        prop="meterNo"
        :show-overflow-tooltip="true"
      />
      <px-table-column
        label="抄表值 (t)"
        align="center"
        prop="meterReading"
        :show-overflow-tooltip="true"
      />
      <px-table-column
        label="水量 (t)"
        align="center"
        prop="meterConsume"
        width="100"
        :show-overflow-tooltip="true"
      />
      <px-table-column
        label="抄表日期"
        align="center"
        prop="meterDate"
        :show-overflow-tooltip="true"
      />
      <px-table-column
        label="抄表时间"
        align="center"
        prop="meterTime"
        :show-overflow-tooltip="true"
      />
      <px-table-column label="操作" align="center" width="100">
        <template #default="scope">
          <px-icon
            color="#409EFC"
            style="cursor: pointer"
            @click="handleDetail(scope.row)"
          >
            <Report />
          </px-icon>
        </template>
      </px-table-column>
    </px-table>
    <px-dialog
      v-model="dialogVisible"
      title="流量计-超标记录-历史曲线"
      width="40%"
      align-center
    >
      <px-form
        ref="queryTimeRef"
        :model="queryTimeParams"
        :inline="true"
        label-width="90px"
      >
        <px-form-item label="时间" style="width: 480px">
          <px-date-picker
            v-model="dateRange"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="datetimerange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </px-form-item>
        <px-form-item>
          <px-button type="primary" icon="" @click="handleQuery"
            >查询</px-button
          >
          <px-button icon="" @click="resetQuery">重置</px-button>
        </px-form-item>
      </px-form>
      <div id="meterTecord" class="meterTecord" />
    </px-dialog>
  </div>
</template>

<style lang="scss" scoped>
.meterTecord {
  width: 100%;
  height: 400px;
}
</style>
